import { IPublicTypeComponentMetadata, IPublicTypeSnippet } from '@alilc/lowcode-types';

const DualBarChartMeta: IPublicTypeComponentMetadata = {
  componentName: 'DualBarChart',
  title: '双柱状图',
  category: '图表',
  group: '消防安全',
  docUrl: '',
  screenshot: '',
  devMode: 'proCode',
  npm: {
    package: 'hzdz-charts',
    version: '0.1.0',
    exportName: 'DualBarChart',
    main: 'src/index.tsx',
    destructuring: true,
    subName: ''
  },
  props: [
    {
      name: 'ref',
      propType: 'object',
    },
    {
      name: 'key',
      propType: 'string',
    },
    {
      name: 'style',
      propType: 'object',
    },
    {
      name: 'className',
      propType: 'string',
    },
    {
      name: 'width',
      propType: 'number',
      description: '容器宽度'
    },
    {
      name: 'height',
      propType: 'number',
      description: '容器高度'
    },
    {
      name: 'backgroundColor',
      propType: 'string',
      description: '容器背景色'
    },
    {
      name: 'borderRadius',
      propType: 'number',
      description: '容器圆角'
    },
    {
      name: 'data',
      propType: 'array',
      description: '图表数据'
    },
    {
      name: 'maxValue',
      propType: 'number',
      description: '最大值'
    },
    {
      name: 'barWidth',
      propType: 'number',
      description: '柱子宽度'
    },
    {
      name: 'barGap',
      propType: 'number',
      description: '双柱间距'
    },
    {
      name: 'groupGap',
      propType: 'number',
      description: '组间距'
    },
    {
      name: 'normalBarColor',
      propType: 'string',
      description: '正常柱子颜色'
    },
    {
      name: 'normalBarGradientEnd',
      propType: 'string',
      description: '正常柱子渐变结束色'
    },
    {
      name: 'alertBarColor',
      propType: 'string',
      description: '告警柱子颜色'
    },
    {
      name: 'alertBarGradientEnd',
      propType: 'string',
      description: '告警柱子渐变结束色'
    },
    {
      name: 'backgroundBarColor',
      propType: 'string',
      description: '背景柱子颜色'
    },
    {
      name: 'backgroundBarGradientEnd',
      propType: 'string',
      description: '背景柱子渐变结束色'
    },
    {
      name: 'showValueLabels',
      propType: 'bool',
      description: '显示数值标签'
    },
    {
      name: 'valueLabelFontSize',
      propType: 'number',
      description: '数值标签字体大小'
    },
    {
      name: 'valueLabelColor',
      propType: 'string',
      description: '数值标签颜色'
    },
    {
      name: 'valueLabelFontFamily',
      propType: 'string',
      description: '数值标签字体'
    },
    {
      name: 'valueLabelFontWeight',
      propType: 'number',
      description: '数值标签字体粗细'
    },
    {
      name: 'showCategoryLabels',
      propType: 'bool',
      description: '显示分类标签'
    },
    {
      name: 'categoryLabelFontSize',
      propType: 'number',
      description: '分类标签字体大小'
    },
    {
      name: 'categoryLabelColor',
      propType: 'string',
      description: '分类标签颜色'
    },
    {
      name: 'categoryLabelFontFamily',
      propType: 'string',
      description: '分类标签字体'
    },
    {
      name: 'categoryLabelFontWeight',
      propType: 'number',
      description: '分类标签字体粗细'
    },
    {
      name: 'showLegend',
      propType: 'bool',
      description: '显示图例'
    },
    {
      name: 'legendFontSize',
      propType: 'number',
      description: '图例字体大小'
    },
    {
      name: 'legendColor',
      propType: 'string',
      description: '图例颜色'
    },
    {
      name: 'legendFontFamily',
      propType: 'string',
      description: '图例字体'
    },
    {
      name: 'legendFontWeight',
      propType: 'number',
      description: '图例字体粗细'
    },
    {
      name: 'legendGap',
      propType: 'number',
      description: '图例间距'
    },
    {
      name: 'onBarClick',
      propType: 'func',
      description: '柱子点击事件'
    }
  ],
  configure: {
    props: [
      // 容器配置
      {
        name: 'container',
        type: 'group',
        display: 'accordion',
        title: {
          label: '容器配置',
        },
        items: [
          {
            name: 'width',
            title: { label: '容器宽度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 386 }
          },
          {
            name: 'height',
            title: { label: '容器高度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 219 }
          },
          {
            name: 'backgroundColor',
            title: { label: '容器背景色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'transparent' }
          },
          {
            name: 'borderRadius',
            title: { label: '容器圆角' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 0 }
          }
        ]
      },
      // 数据配置
      {
        name: 'data',
        type: 'group',
        display: 'accordion',
        title: {
          label: '数据配置',
        },
        items: [
          {
            name: 'data',
            title: { label: '图表数据' },
            setter: {
              componentName: 'ArraySetter',
              isRequired: false,
              initialValue: [
                { category: '供配电', normal: 48, alert: 8 },
                { category: '给排水', normal: 20, alert: 1 },
                { category: '暖通', normal: 35, alert: 3 },
                { category: '消防', normal: 28, alert: 5 }
              ],
              config: {
                items: [
                  {
                    name: 'category',
                    title: '分类名称',
                    setter: 'StringSetter',
                    initialValue: '供配电'
                  },
                  {
                    name: 'normal',
                    title: '正常数值',
                    setter: 'NumberSetter',
                    initialValue: 48
                  },
                  {
                    name: 'alert',
                    title: '告警数值',
                    setter: 'NumberSetter',
                    initialValue: 8
                  }
                ]
              },
              newItemDefault: {
                category: '新分类',
                normal: 0,
                alert: 0
              },
              sortable: true
            }
          },
          {
            name: 'maxValue',
            title: { label: '最大值' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 60 }
          }
        ]
      },
      // 柱子样式配置
      {
        name: 'barStyle',
        type: 'group',
        display: 'accordion',
        title: {
          label: '柱子样式',
        },
        items: [
          {
            name: 'barWidth',
            title: { label: '柱子宽度' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 10 }
          },
          {
            name: 'barGap',
            title: { label: '双柱间距' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 20 }
          },
          {
            name: 'groupGap',
            title: { label: '组间距' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 30 }
          },
          {
            name: 'normalBarColor',
            title: { label: '正常柱子颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#1EE7E7' }
          },
          {
            name: 'normalBarGradientEnd',
            title: { label: '正常柱子渐变结束色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'rgba(30,231,231,0.35)' }
          },
          {
            name: 'alertBarColor',
            title: { label: '告警柱子颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FF4242' }
          },
          {
            name: 'alertBarGradientEnd',
            title: { label: '告警柱子渐变结束色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'rgba(255,92,0,0.35)' }
          },
          {
            name: 'backgroundBarColor',
            title: { label: '背景柱子颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'rgba(191,234,255,0)' }
          },
          {
            name: 'backgroundBarGradientEnd',
            title: { label: '背景柱子渐变结束色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: 'rgba(191,234,255,0.2)' }
          }
        ]
      },
      // 标签配置
      {
        name: 'labels',
        type: 'group',
        display: 'accordion',
        title: {
          label: '标签配置',
        },
        items: [
          {
            name: 'showValueLabels',
            title: { label: '显示数值标签' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'valueLabelFontSize',
            title: { label: '数值标签字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 12 }
          },
          {
            name: 'valueLabelColor',
            title: { label: '数值标签颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FFFFFF' }
          },
          {
            name: 'valueLabelFontFamily',
            title: { label: '数值标签字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'SourceHanSansSC' }
          },
          {
            name: 'valueLabelFontWeight',
            title: { label: '数值标签字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
          },
          {
            name: 'showCategoryLabels',
            title: { label: '显示分类标签' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'categoryLabelFontSize',
            title: { label: '分类标签字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 14 }
          },
          {
            name: 'categoryLabelColor',
            title: { label: '分类标签颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#E6F7FF' }
          },
          {
            name: 'categoryLabelFontFamily',
            title: { label: '分类标签字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'PingFangSC' }
          },
          {
            name: 'categoryLabelFontWeight',
            title: { label: '分类标签字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
          }
        ]
      },
      // 图例配置
      {
        name: 'legend',
        type: 'group',
        display: 'accordion',
        title: {
          label: '图例配置',
        },
        items: [
          {
            name: 'showLegend',
            title: { label: '显示图例' },
            setter: { componentName: 'BoolSetter', isRequired: false, initialValue: true }
          },
          {
            name: 'legendFontSize',
            title: { label: '图例字体大小' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 12 }
          },
          {
            name: 'legendColor',
            title: { label: '图例颜色' },
            setter: { componentName: 'ColorSetter', isRequired: false, initialValue: '#FFFFFF' }
          },
          {
            name: 'legendFontFamily',
            title: { label: '图例字体' },
            setter: { componentName: 'StringSetter', isRequired: false, initialValue: 'SourceHanSansSC' }
          },
          {
            name: 'legendFontWeight',
            title: { label: '图例字体粗细' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 400 }
          },
          {
            name: 'legendGap',
            title: { label: '图例间距' },
            setter: { componentName: 'NumberSetter', isRequired: false, initialValue: 20 }
          }
        ]
      }
    ],
    supports: {
      style: true,
      className: true,
      events: ['onBarClick']
    }
  }
};

const snippets: IPublicTypeSnippet[] = [
  {
    title: '双柱状图',
    screenshot: '',
    schema: {
      componentName: 'DualBarChart',
      props: {
        width: 386,
        height: 219,
        backgroundColor: 'transparent',
        borderRadius: 0,
        data: [
          { category: '供配电', normal: 48, alert: 8 },
          { category: '给排水', normal: 20, alert: 1 },
          { category: '暖通', normal: 35, alert: 3 },
          { category: '消防', normal: 28, alert: 5 }
        ],
        maxValue: 60,
        barWidth: 10,
        barGap: 20,
        groupGap: 30,
        normalBarColor: '#1EE7E7',
        normalBarGradientEnd: 'rgba(30,231,231,0.35)',
        alertBarColor: '#FF4242',
        alertBarGradientEnd: 'rgba(255,92,0,0.35)',
        backgroundBarColor: 'rgba(191,234,255,0)',
        backgroundBarGradientEnd: 'rgba(191,234,255,0.2)',
        showValueLabels: true,
        valueLabelFontSize: 12,
        valueLabelColor: '#FFFFFF',
        valueLabelFontFamily: 'SourceHanSansSC',
        valueLabelFontWeight: 400,
        showCategoryLabels: true,
        categoryLabelFontSize: 14,
        categoryLabelColor: '#E6F7FF',
        categoryLabelFontFamily: 'PingFangSC',
        categoryLabelFontWeight: 400,
        showLegend: true,
        legendFontSize: 12,
        legendColor: '#FFFFFF',
        legendFontFamily: 'SourceHanSansSC',
        legendFontWeight: 400,
        legendGap: 20
      }
    }
  }
];

export default {
  ...DualBarChartMeta,
  snippets
}; 